<template>
	<base-page title="订单详情" :showBorder="false" backgroundColor="white">
		<view class="h-1 bg-default"></view>
		<template v-if="detail">
			<!-- 我的购买订单详情 -->
			<template v-if="viewOrderType===1">
				<view class="p-16 flex item-center" style="line-height:22px;">
					<text class="text-bold" :style="`color:${currentOrderState.color}`">{{currentOrderState.text}}</text>
				</view>
				<view class="px-16 pb-16 color-secondary-warning" v-if="detail.orderState === 9">报名信息审核中，请耐心等待</view>
				<view class="px-16 pb-16 color-secondary-warning" v-if="detail.orderState === 6 && detail.orderNote">{{ detail.orderNote }}</view>
				<view class="h-13 bg-default"></view>
				<view class="p-16" @click="toActivity">
					<view class="mt-8 flex">
						<image class="radius-8 mr-12 flex-shrink" style="width:88px;height:88px;" :src="activeImg"></image>
						<view class="text-bold flex-1 w-0">{{detail.activeTitle}}</view>
					</view>
					<view class="mt-16 flex justify-end item-center h-17 fs-12 text-color-hint">
						<text class="mt-2">数量 x{{detail.orderNum}}</text>
					</view>
				</view>
				<view v-if="isSignUp && [1,2,3,5,7].includes(detail.orderState) && detail.stepPriceState === 2" class="bg-default h-27 flex center text-color-regular fs-12" v-html="inviteReturnMsg"></view>
				<view v-else class="h-13 bg-default"></view>
				<view v-if="detail.itemGroups?.length>1">
					<view class=" fs-12 pl-16 pt-2 pb-4 c9 bg-default">
						* 分组内部分核销不退款，整组未核销活动到期后自动退款
					</view>
					<scroll-view scroll-x="true" class="uni-bg-white">
						<view class="flex item-center pt-4">
							<view v-for="(itemGroupItem,itemGroupItemInd) in detail.itemGroups" :key="itemGroupItem.itemGroup" class="px-16 py-8 item-group-tab-title relative" 
								:class="{'selected':itemGroupItemSelectedInd === itemGroupItemInd}" @click="itemGroupItemSelectedInd = itemGroupItemInd">
								核销{{ itemGroupIndMapping[itemGroupItemInd] }}
								<text v-if="itemGroupItem.allVerified" class="absolute all-verified-label fs-8 p-1 radius-4 bg-default">已核销</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view>
					<template v-if="detail.signInRequired === 1 && enrollOrderItems && ![4,6,9,10].includes(detail.orderState)">
						<view class="p-16">
							<view v-for="(item,i) in enrollOrderItems" :key="i" class="radius-8 bg-white p-16 relative" :class="i>0?'mt-12':''" style="box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.15);">
								<view class="fs-16 text-bold">活动签到码</view>
								<view class="h-17 flex item-center fs-12 mt-4 text-color-hint text-cut">有效期限：{{detail.validStartTime}} 至 {{detail.validEndTime}}</view>
								<view class="h-1 bg-default mt-11 mb-16"></view>
								<view class="flex justify-between">
									<view class="flex item-center fs-12 text-color-hint" @click="showInstructionDialog(item)">
										<text>可用商户&使用说明</text>
										<image class="w-16 h-16" src="@/static/svg/order/icon-double-arrow.svg"></image>
									</view>
									<view class="flex item-center">
										<image v-if="item.subOrderState===1 && item.mulState===1" class="w-20 h-20 ml-12" src="@/static/svg/activity/icon-goods-service.svg" @click="showServiceDialog(item)"></image>
										<view v-if="item.subOrderState===1" class="h-30 ml-12 flex center radius-8 bg-primary fs-12 text-white" style="width:96px;" @click="toUseVerifyCode(item, true)">去签到</view>
									</view>
									<view v-if="[2,4].includes(item.subOrderState)" class="absolute" style="bottom:0;right:10px;">
										<image v-if="item.subOrderState===2" style="width:80px;height:80px;" src="@/static/svg/order/flag-code-checked.svg"></image>
										<image v-else-if="item.subOrderState===4" style="width:80px;height:80px;" src="@/static/svg/order/flag-code-expired.svg"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="h-13 bg-default"></view>
					</template>
					<template v-if="appOrderItems && appOrderItems.length && ![4,6,9,10].includes(detail.orderState)">
						<view class="p-16">
							<view v-for="(item,i) in appOrderItems" :key="i" class="radius-8 bg-white p-16 relative" :class="i>0?'mt-12':''" style="box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.15);">
								<view class="fs-16 text-bold">{{ item.goodsName}}</view>
								<view class="h-17 flex item-center fs-12 mt-4 text-color-hint text-cut">有效期限：{{detail.validStartTime}} 至 {{detail.validEndTime}}</view>
								<view class="h-1 bg-default mt-11 mb-16"></view>
								<view class="flex justify-between">
									<view class="flex item-center fs-12 text-color-hint" @click="showInstructionDialog(item)">
										<text>可用商户&使用说明</text>
										<image class="w-16 h-16" src="@/static/svg/order/icon-double-arrow.svg"></image>
									</view>
									<view class="flex item-center">
										<image v-if="item.subOrderState===1 && item.mulState===1" class="w-20 h-20 ml-12" src="@/static/svg/activity/icon-goods-service.svg" @click="showServiceDialog(item)"></image>
										<view v-if="item.subOrderState===1" class="h-30 ml-12 flex center radius-8 bg-primary fs-12 text-white" style="width:96px;" @click="toUseVerifyCode(item)">立即使用</view>
									</view>
									<view v-if="[2,4].includes(item.subOrderState)" class="absolute" style="bottom:0;right:10px;">
										<image v-if="item.subOrderState===2" style="width:80px;height:80px;" src="@/static/svg/order/flag-code-checked.svg"></image>
										<image v-else-if="item.subOrderState===4" style="width:80px;height:80px;" src="@/static/svg/order/flag-code-expired.svg"></image>
										<!-- <image v-else-if="item.subOrderState===3" style="width:80px;height:80px;" src="@/pagesA/order/components/verify-code/flag-invalid.svg"></image> -->
									</view>
								</view>
							</view>
						</view>
						<view class="h-13 bg-default"></view>
					</template>
				</view>
				<!-- <template v-if="isSignUp && detail.appOrderItems && detail.appOrderItems.length && ![4,6,9].includes(detail.orderState)">
					<swiper class="pt-24 pb-20" :style="detail.verifyMethod===1 ? 'min-height:410px;':'min-height:360px;'" previous-margin="50" next-margin="50">
						<swiper-item v-for="(item,i) in detail.appOrderItems" :key="i" class="h-full px-10">
							<verify-code :value="item.verifyCode" :state="item.subOrderState" :isExpire="new Date() > new Date(reformatDatetime(detail.validEndTime))"></verify-code>
							<view v-if="showJoinButton(item)" class="h-34 mt-16 flex center radius-8 bg-primary fs-12 text-white" @click="toJoin(item)">确认参与</view>
						</swiper-item>
					</swiper>
					<view class="h-13 bg-default"></view>
				</template> -->
				<template v-if="isSignUp">
					<block v-if="detail.orderEnrollInfos && detail.orderEnrollInfos.length">
						<view class="p-16 fs-16 text-bold" style="line-height:22px;">
							<text>报名信息</text>
						</view>
						<view class="h-1 bg-default"></view>
						<view class="p-16">
							<view v-for="(item,i) in detail.orderEnrollInfos" :key="i" class="h-17 flex item-center fs-12" :class="i > 0 ? 'mt-12' : ''">
								<text class="text-color-hint">{{item.title}}：</text>
								<text>{{item.value}}</text>
							</view>
						</view>
						<view class="h-13 bg-default"></view>
					</block>
					<view class="p-16 fs-16 text-bold" style="line-height:22px;">
						<text>订单信息</text>
					</view>
					<view class="h-1 bg-default"></view>
				</template>
				<view class="p-16">
					<view class="fs-12 color-secondary-warning">*若需开具发票，请到店联系商家工作人员。</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>订单编号：{{detail.orderNo}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>下单时间：{{detail.orderTime}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>订单金额：¥{{numberFormat(detail.orderPrice)}}</text>
					</view>
					<view v-if="detail.discountAmt" class="h-17 flex fs-12 mt-12">
						<text>优惠金额：¥{{numberFormat(detail.discountAmt)}}</text>
					</view>
					<view v-if="detail.redPacketAmt" class="h-17 flex fs-12 mt-12">
						<text>红包金额：¥{{numberFormat(detail.redPacketAmt)}}</text>
						<!-- <text></text> -->
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>
							实付金额：
							<text v-if="detail.orderType === 5">{{detail.payPrice}}积分</text>
							<text v-else>¥{{numberFormat(detail.payPrice)}}</text>
						</text>
					</view>
					<view class="flex justify-end mt-16">
						<view v-if="isSignUp" class="h-26 ml-8 flex center radius-8 text-color-hint uni-border" style="width:88px;" @click="showServiceDialog">联系客服</view>
						<view v-if="!isGroupBuy && detail.orderState===2 || isGroupBuy && detail.orderState===10" class="h-26 ml-8 flex center radius-8 text-color-hint uni-border" 
							style="width:88px;" @click="toCancelOrder">取消订单</view>
						<view v-if="detail.orderType===2 && detail.verifyMethod === 1 && detail.orderState===2 && detail.enrollOrderItems && detail.enrollOrderItems[0]" 
							class="h-26 ml-8 flex center radius-8 bg-primary fs-12 text-white" 
							style="width:88px;" @click="toJoin(detail.enrollOrderItems[0])">确认参与</view>
					</view>
				</view>
				<Recommend :activeId="detail.activeId" :businessId="detail.businessId" />
			</template>
			<!-- 我的卖出订单详情 -->
			<template v-else-if="viewOrderType === 2">
				<view class="p-16 flex justify-between item-center" style="line-height:22px;">
					<text>订单编号：{{detail.orderNo}}</text>
					<text class="text-bold" :style="`color:${currentOrderState.color}`">{{currentOrderState.text}}</text>
				</view>
				<view class="h-13 bg-default"></view>
				<view class="p-16">
					<view class="flex item-center">
						<image class="cu-avatar round w-24 h-24 mr-8" :src="detail.orderAvatar"></image>
						<text>{{detail.orderNickName}}</text>
					</view>
					<view class="mt-8 flex">
						<image class="radius-8 mr-12 flex-shrink" style="width:88px;height:88px;" :src="activeImg"></image>
						<view class="text-bold flex-1 w-0">{{detail.activeTitle}}</view>
						<view class="flex-shrink flex-col ml-28 fs-12">
							<text style="opacity:0.99;">¥{{numberFormat(detail.activePrice)}}</text>
							<text class="mt-2">x{{detail.orderNum}}</text>
						</view>
					</view>
					<view class="mt-16 flex justify-between item-center fs-12 h-17">
						<text>商品总价</text>
						<text>¥{{numberFormat(detail.orderPrice)}}</text>
					</view>
					<view v-if="detail.discountAmt" class="mt-8 flex justify-between item-center fs-12 h-17">
						<text>优惠金额</text>
						<text>¥{{numberFormat(detail.discountAmt)}}</text>
					</view>
					<view v-if="detail.redPacketAmt" class="mt-8 flex justify-between item-center fs-12 h-17">
						<text>红包金额</text>
						<text>¥{{numberFormat(detail.redPacketAmt)}}</text>
					</view>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="p-16 flex justify-end">
					<text class="fs-12 text-black">实际支付:<text class="color-primary fs-16 text-bold">¥{{detail.payPrice}}</text></text>
				</view>
				<view class="h-13 bg-default"></view>
				<view class="p-16">
					<view v-if="detail.agentAvatar || detail.agentNickName" class="h-20 flex fs-14">
						<text>经纪人：</text>
						<image class="cu-avatar round size-16 mx-4" :src="detail.agentAvatar"></image>
						<text>{{detail.agentNickName}}</text>
					</view>
					<view class="flex fs-14" :class="detail.agentAvatar || detail.agentNickName ? 'mt-8' : ''">
						<text class="h-20 flex-shrink">推广权益：</text>
						<view class="break-all">
							<text v-if="detail.commissionAmt">推广佣金 <text class="color-primary">¥{{detail.commissionAmt}}</text></text>
							<text v-else-if="detail.otherEquity">{{detail.otherEquity}}</text>
						</view>
					</view>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="p-16">
					<view class="h-17 flex fs-12">
						<text>支付时间：</text>
						<text>{{detail.payTime}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>下单时间：</text>
						<text>{{detail.orderTime}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>有效期限：</text>
						<text>{{detail.validStartTime}} 至 {{detail.validEndTime}}</text>
					</view>
				</view>
			</template>
			<!-- 我的分销订单详情 -->
			<template v-else-if="viewOrderType===3">
				<view class="p-16 flex justify-between item-center" style="line-height:22px;">
					<text>订单编号：{{detail.orderNo}}</text>
					<text class="text-bold" :style="`color:${currentOrderState.color}`">{{currentOrderState.text}}</text>
				</view>
				<view class="h-13 bg-default"></view>
				<view class="p-16">
					<view class="flex item-center">
						<image class="cu-avatar round w-24 h-24 mr-8" :src="detail.orderAvatar"></image>
						<text>{{detail.orderNickName}}</text>
					</view>
					<view class="mt-8 flex">
						<image class="radius-8 mr-12 flex-shrink" style="width:88px;height:88px;" :src="activeImg"></image>
						<view class="text-bold flex-1 w-0">{{detail.activeTitle}}</view>
						<view class="flex-shrink flex-col ml-28">
							<text style="opacity:0.99;">¥{{numberFormat(detail.activePrice)}}</text>
							<text class="mt-2">x{{detail.orderNum}}</text>
						</view>
					</view>
					<view class="mt-16 flex justify-between item-center fs-12 h-17">
						<text>商品总价</text>
						<text>¥{{numberFormat(detail.orderPrice)}}</text>
					</view>
					<view v-if="detail.discountAmt" class="mt-8 flex justify-between item-center fs-12 h-17">
						<text>优惠金额</text>
						<text>¥{{numberFormat(detail.discountAmt)}}</text>
					</view>
					<view v-if="detail.redPacketAmt" class="mt-8 flex justify-between item-center fs-12 h-17">
						<text>红包金额</text>
						<text>¥{{numberFormat(detail.redPacketAmt)}}</text>
					</view>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="p-16 flex justify-end">
					<text class="fs-12 text-black">实际支付:<text class="color-primary fs-16 text-bold">¥{{detail.payPrice}}</text></text>
				</view>
				<view class="h-13 bg-default"></view>
				<view class="p-16">
					<view class="h-20 flex fs-14">
						<text>策划人：</text>
						<image class="cu-avatar round size-16 mx-4" :src="detail.businessLogo"></image>
						<text>{{detail.businessShortName}}</text>
					</view>
					<view class="flex fs-14 mt-8">
						<text class="h-20 flex-shrink">推广权益：</text>
						<view class="break-all">
							<text v-if="detail.agentPointsAmt">推广积分 <text class="color-primary">{{detail.agentPointsAmt}}积分</text></text>
							<text v-else-if="detail.commissionAmt">推广佣金 <text class="color-primary">¥{{detail.commissionAmt}}</text></text>
							<text v-else-if="detail.otherEquity">{{detail.otherEquity}}</text>
						</view>
					</view>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="p-16">
					<view class="h-17 flex fs-12 mt-12">
						<text>支付时间：</text>
						<text>{{detail.payTime}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>下单时间：</text>
						<text>{{detail.orderTime}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>有效期限：</text>
						<text>{{detail.validStartTime}} 至 {{detail.validEndTime}}</text>
					</view>
				</view>
			</template>
			<!-- 我创建的活动，下单的订单详情 -->
			<template v-else-if="viewOrderType === 4">
				<view class="p-16 flex justify-between item-center" style="line-height:22px;">
					<text>订单编号：{{detail.orderNo}}</text>
					<text class="text-bold" :style="`color:${currentOrderState.color}`">{{currentOrderState.text}}</text>
				</view>
				<view class="h-13 bg-default"></view>
				<view class="p-16">
					<view class="flex item-center">
						<image class="cu-avatar round w-24 h-24 mr-8" :src="detail.orderAvatar"></image>
						<text>{{detail.orderNickName}}</text>
					</view>
					<view class="mt-8 flex">
						<image class="radius-8 mr-12 flex-shrink" style="width:88px;height:88px;" :src="activeImg"></image>
						<view class="text-bold flex-1 w-0">{{detail.activeTitle}}</view>
						<view class="flex-shrink flex-col ml-28 fs-12">
							<text style="opacity:0.99;">¥{{numberFormat(detail.activePrice)}}</text>
							<text class="mt-2">x{{detail.orderNum}}</text>
						</view>
					</view>
					<view class="mt-16 flex justify-between item-center fs-12 h-17">
						<text>商品总价</text>
						<text>¥{{numberFormat(detail.orderPrice)}}</text>
					</view>
					<view v-if="detail.discountAmt" class="mt-8 flex justify-between item-center fs-12 h-17">
						<text>优惠金额</text>
						<text>¥{{numberFormat(detail.discountAmt)}}</text>
					</view>
					<view v-if="detail.redPacketAmt" class="mt-8 flex justify-between item-center fs-12 h-17">
						<text>红包金额</text>
						<text>¥{{numberFormat(detail.redPacketAmt)}}</text>
					</view>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="p-16 flex justify-end">
					<text class="fs-12 text-black">实际支付:<text class="color-primary fs-16 text-bold">¥{{detail.payPrice}}</text></text>
				</view>
				<view class="h-13 bg-default"></view>
				<view class="p-16">
					<view v-if="detail.businessLogo || detail.businessShortName" class="h-20 flex fs-14">
						<text>策划人：</text>
						<image class="cu-avatar round size-16 mx-4" :src="detail.businessLogo"></image>
						<text>{{detail.businessShortName}}</text>
					</view>
					<view v-if="detail.agentAvatar || detail.agentNickName" class="h-20 flex fs-14">
						<text>经纪人：</text>
						<image class="cu-avatar round size-16 mx-4" :src="detail.agentAvatar"></image>
						<text>{{detail.agentNickName}}</text>
					</view>
					<view v-if="detail.commissionAmt||detail.otherEquity" class="flex fs-14" :class="detail.agentAvatar || detail.agentNickName ? 'mt-8' : ''">
						<text class="h-20 flex-shrink">推广权益：</text>
						<view class="break-all">
							<text v-if="detail.commissionAmt">推广佣金 <text class="color-primary">¥{{detail.commissionAmt}}</text></text>
							<text v-else-if="detail.otherEquity">{{detail.otherEquity}}</text>
						</view>
					</view>
				</view>
				<view class="h-1 bg-default"></view>
				<view class="p-16">
					<view class="h-17 flex fs-12">
						<text>支付时间：</text>
						<text>{{detail.payTime}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>下单时间：</text>
						<text>{{detail.orderTime}}</text>
					</view>
					<view class="h-17 flex fs-12 mt-12">
						<text>有效期限：</text>
						<text>{{detail.validStartTime}} 至 {{detail.validEndTime}}</text>
					</view>
				</view>
			</template>
			<instructions-dialog
				ref="instructionDialog"
				:verifyCodeTitle="verifyCodeTitle"
				:verifyCode="verifyCode"
				:codeState="codeState"
				:showCode="![1, 4, 6].includes(detail.orderState)"
				@onShowVerifyCode="toShowVerifyCode"
			/>
			<service-dialog
				ref="serviceDialog"
				:phoneNumber="detail.activeMobile"
				:weixin="detail.activeWechat"
			/>
			<uni-popup ref="verifyCodePopup" :is-mask-click="false">
				<view v-if="verifyCode" class="relative flex-col" style="width:calc(100vw - 32px);">
					<image class="w-32 h-32 mb-12" style="align-self:flex-end;" src="@/static/svg/icon-close.svg" @click="onCloseVerifyCode"></image>
					<verify-code mode="dialog" :title="verifyCodeTitle" :value="verifyCode" :state="codeState" />
				</view>
			</uni-popup>
		</template>
	</base-page>
</template>

<script setup name="OrderDetail">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import {
		buyOrderDetailApi,
		sellOrderDetailApi,
		agentOrderDetailApi,
		confirmJoinApi,
		cancelOrderApi
	} from '@/api/order.js'
	import VerifyCode from './components/verify-code/verify-code.vue'
	import ServiceDialog from '@/components/service-dialog/service-dialog.vue'
	import Recommend from '@/pagesF/components/recommend/recommend.vue'
	import { numberFormat, reformatDatetime } from '@/utils/index.js'
	
	const orderStateDict = {
		1: {
			text: '待支付',
			color: '#FA4543'
		},
		2: {
			text: '待核销',
			color: '#FCB513'
		},
		3: {
			text: '核销中',
			color: '#FA4543'
		},
		4: {
			text: '已取消',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		5: {
			text: '已完成',
			color: '#16BE62'
		},
		6: {
			text: '已关闭',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		7: {
			text: '已核销',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		9: {
			text: '待审核',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		10: {
			text: '待成团',
			color: 'rgba(51, 51, 51, 0.60)'
		},
	}
	
	const currentOrderState = computed(() => {
		if (detail.value) {
			if (viewOrderType.value === 1 && detail.value.orderState === 4 && '票付通出票失败' === detail.value.orderNote) {
				return {
					text: '库存不足,已取消',
					color: 'rgba(51, 51, 51, 0.60)'
				}
			} else {
				return orderStateDict[detail.value.orderState] || {}
			}
		}
		return {}
	})

	const isGroupBuy = computed(()=>detail.value?.promotionType==='GROUP_BUY')
	
	// 活动首图
	const activeImg = computed(() => {
		return detail.value && detail.value.activeImg && detail.value.activeImg.split(',')[0] || ''
	})
	
	/**
	 * 是否报名活动订单
	 * 订单类型(1-团购订单,2-报名订单,4-团购+报名)
	 */
	const isSignUp = computed(() => {
		return detail.value && (detail.value.orderType == 2 || detail.value.orderType == 4)
	})
	
	const inviteReturnMsg = computed(() => {
		let str = detail.value.inviteReturnMsg
		const regex = /\d+/g
		str = str.replace(/(\d*\.?\d+)/g, function(match, val, index) {
			if (index > 2) {
				return `<span class="color-primary fs-16 font-semibold">${match}</span>`
			} else {
				// return `<span class="color-primary fs-16">${match}</span>`
				return match
			}
		})
		return str
	})
	
	// 是否显示“确认参与按钮”,在报名时间结束后显示，过了核销期不显示
	const showJoinButton = (item) => {
		// 关闭未满员自动退的活动，线上核销的订单核销时间到了之后显示确认参与按钮
		if (detail.value.noFullAutoRefundState === 2) {
			return detail.value.verifyMethod===1 && item.subOrderState===1 && (new Date() > new Date(reformatDatetime(detail.value.validStartTime))) && (new Date() < new Date(reformatDatetime(detail.value.validEndTime)))
		}
		// 开启未满员自动退的活动,在报名时间结束后显示
		return detail.value.verifyMethod===1 && item.subOrderState===1 && (new Date() > new Date(reformatDatetime(detail.value.endTime))) && (new Date() < new Date(reformatDatetime(detail.value.validEndTime)))
	}
	
	// 点击确认参与按钮
	const toJoin = (item) => {
		uni.showModal({
			content: '确认参与后，订单不可退款',
			confirmColor: '#FA4543',
			cancelColor: '#333333E6',
			success: (res) => {
				if (res.confirm) {
					doJoin(item.verifyCode)
				}
			}
		})
	}
	
	const doJoin = (verifyCode) => {
		confirmJoinApi({
			orderId: detail.value.id,
			verifyCode
		}).then(res => {
			console.log('参与结果', res)
			if (res) {
				uni.showToast({
					icon: 'none',
					title: '已确认参与'
				})
				getOrderDetail()
			}
		})
	}
	
	const serviceDialog = ref(null)
	const showServiceDialog = (goods) => {
		console.log('客服', goods, serviceDialog.value)
		serviceDialog.value && serviceDialog.value.showDialog(true, goods)
	}
	
	const instructionDialog = ref(null)
	const showInstructionDialog = (activeGoods) => {
		console.log('商品', activeGoods)
		verifyCodeTitle.value = activeGoods.goodsName
		verifyCode.value = activeGoods.verifyCode
		codeState.value = activeGoods.subOrderState
		instructionDialog.value.showDialog(true, activeGoods && activeGoods.id, 'subOrderId')
	}
	
	const verifyCodePopup = ref(null)
	const verifyCodeTitle = ref(null)
	const verifyCode = ref(null)
	const codeState = ref(null)
	const toShowVerifyCode = (data) => {
		console.log('显示核销码', data)
		instructionDialog.value.showDialog(false)
		verifyCodeTitle.value = data.verifyCodeTitle
		verifyCode.value = data.verifyCode
		codeState.value = data.codeState
		verifyCodePopup.value.open()
	}
	const onCloseVerifyCode = () => {
		verifyCodeTitle.value = null
		verifyCode.value = null
		codeState.value = null
		verifyCodePopup.value.close()
		getOrderDetail()
	}
	// 点击"立即使用"按钮
	const toUseVerifyCode = (activeGoods, signInRequired) => {
		verifyCodeTitle.value = signInRequired ? '活动签到码' : activeGoods.goodsName
		verifyCode.value = activeGoods.verifyCode
		codeState.value = activeGoods.subOrderState
		verifyCodePopup.value.open()
	}
	
	// 点击取消订单
	const toCancelOrder = () => {
		uni.showModal({
			content: '确定要取消订单吗？',
			confirmColor: '#FA4543',
			cancelColor: '#333333E6',
			success: (res) => {
				if (res.confirm) {
					doCancel()
				}
			}
		})
	}
	
	const doCancel = () => {
		cancelOrderApi({
			orderId: detail.value.id
		}).then(res => {
			if (res) {
				uni.showToast({
					icon: 'none',
					title: '已取消'
				})
				getOrderDetail()
			}
		})
	}

	const toActivity = () => {
		const url = detail.value.activePromotionType === 'GROUP_BUY'
			?`/pagesB/activity/activity-group-buy`
			:`/pagesB/activity/activity`;
		uni.navigateTo({
			url: `${url}?id=${detail.value.activeId}&_from=order_detail`
		})
	}
	
	const id = ref('')
	const viewOrderType = ref('')
	const detail = ref(null)
	const getOrderDetail = () => {
		const apiMethod = [2, 4].includes(viewOrderType.value) ? sellOrderDetailApi : viewOrderType.value === 3 ? agentOrderDetailApi : buyOrderDetailApi
		apiMethod({
			id: id.value
		}).then(res => {
			detail.value = res
		})
	}

	const itemGroupIndMapping = {
		0:'一',
		1:'二',
		2:'三',
		3:'四',
		4:'五',
		5:'六',
		6:'七',
		7:'八',
		8:'九',
		9:'十',
		10:'十一',
	};
	const itemGroupItemSelectedInd = ref(0);
	const enrollOrderItems = computed(()=>{
		return detail.value.itemGroups?.length>1
			?detail.value.itemGroups[itemGroupItemSelectedInd.value].enrollOrderItems
			:detail.value.enrollOrderItems;
	});
	const appOrderItems = computed(()=>{
		return detail.value.itemGroups?.length>1
			?detail.value.itemGroups[itemGroupItemSelectedInd.value].appOrderItems
			:detail.value.appOrderItems;
	});

	onLoad((options) => {
		console.log('订单详情', options)
		id.value = +options.id || ''
		viewOrderType.value = +options.type || ''
		if (id.value) {
			getOrderDetail()
		}
	})
</script>
<style scoped lang="scss">
	.item-group-tab-title{
		border-bottom: 2px solid transparent;
		white-space: nowrap;
		&.selected{
			border-bottom-color:  #FA4543;
		}
		
	}

	.all-verified-label{
		top: 0;
		right: 0;
		transform: rotate(-30deg);
	}
</style>